<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="description" content="这是代码吾爱制作的jQuery插件：警告/确认/提示弹出对话框效果演示页面" />
		<meta name="keywords" content="弹出窗口,弹出DIV层,Div弹出框,alert, confirm, prompt, demo" />
		<title>jQuery插件：警告/确认/提示弹出对话框效果</title>
		<style type="text/css">
			BODY,
			HTML {
				padding: 0px;
				margin: 0px;
			}
			BODY {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				background: #FFF;
				padding: 15px;
			}
			
			H1 {
				font-size: 20px;
				font-weight: normal;
			}
			
			H2 {
				font-size: 16px;
				font-weight: normal;
			}
			
			FIELDSET {
				border: solid 1px #CCC;
				-moz-border-radius: 16px;
				-webkit-border-radius: 16px;
				border-radius: 16px;
				padding: 1em 2em;
				margin: 1em 0em;
			}
			
			LEGEND {
				color: #666;
				font-size: 16px;
				padding: 0em .5em;
			}
			
			PRE {
				font-family: "Courier New", monospace;
				font-size: 11px;
				color: #666;
				background: #F8F8F8;
				padding: 1em;
				-moz-border-radius: 8px;
				-webkit-border-radius: 8px;
				border-radius: 8px;
			}
			
			/*自定义弹出框样式style_1
			整理：代码吾爱
			网站：http://www.code52.net/
			*/
			#popup_container.style_1 {
				font-family: Georgia, serif;
				color: #A4C6E2;
				background: #005294;
				border-color: #113F66;
			}
			
			#popup_container.style_1 #popup_title {
				color: #FFF;
				font-weight: normal;
				text-align: left;
				background: #76A5CC;
				border: solid 1px #005294;
				padding-left: 1em;
			}
			
			#popup_container.style_1 #popup_content {
				background: none;
			}
			
			#popup_container.style_1 #popup_message {
				padding-left: 0em;
			}
			
			#popup_container.style_1 INPUT[type='button'] {
				border: outset 2px #76A5CC;
				color: #A4C6E2;
				background: #3778AE;
			}
			
		</style>
		
		<!--基础文件，分别是jQuery基库和拖拽UI插件-->
		<script src="${pageContext.request.contextPath}/js/jquery.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/jquery.ui.draggable.js" type="text/javascript"></script>
		
		<!-- 对话框核心JS文件和对应的CSS文件-->
		<script src="${pageContext.request.contextPath}/js/jquery.alerts.js" type="text/javascript"></script>
		<link href="${pageContext.request.contextPath}/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
		
		<!-- 示例代码 -->
		<script type="text/javascript">
			//整理：代码吾爱
			//网站：http://www.code52.net/
			$(document).ready( function() {
				
				$("#alert_button").click( function() {
					jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
				});
				
				$("#confirm_button").click( function() {
					jConfirm('你确定这么做吗?', '确定对话框', function(r) {
						jAlert('是否确定: ' + r, '确定内容');
					});
				});
				
				$("#prompt_button").click( function() {
					jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
						if( r ) alert('你输入的是 ' + r);
					});
				});
				
				$("#alert_button_with_html").click( function() {
					jAlert('你可以使用HTML标签，比如 <strong>加粗</strong>, <em>斜体</em>，和 <u>下划线</u>!');
				});
				
				$(".alert_style_example").click( function() {
					$.alerts.dialogClass = $(this).attr('id'); // 设置自定义样式的Class
					jAlert('这是一个自定义的CSS类 &ldquo;style_1&rdquo;', '自定义样式', function() {
						$.alerts.dialogClass = null; // 重置到默认值
					});
				});
			});
			
		</script>
		
	</head>
	
	<body>
		
		<h1><a href="http://www.code52.net/page/JS/js200901_01_342.html">&laquo; jQuery警告/确认/提示弹出对话框效果（替换传统JavaScript下的提示框）</a></h1>
		
		<h2>基本示例</h2>
		
		<fieldset>
			<legend>警告提示框（Alert）</legend>
<pre>
jAlert('这是一个可自定义样式的警告对话框', '警告对话框');
</pre>
			<p>
				<input id="alert_button" type="button" value="警告提示框" />
			</p>
		</fieldset>
		
		
		<fieldset>
			<legend>确认对话框（Confirm）</legend>
<pre>
jConfirm('你确定这么做吗?', '确认对话框', function(r) {
    jAlert('是否确定 ' + r, '确定内容');
});
</pre>
			<p>
				<input id="confirm_button" type="button" value="确认对话框" />
			</p>
		</fieldset>
		
		<fieldset>
			<legend>带输入的提示框（Prompt）</legend>
<pre>
jPrompt('输入字符:', '这里是默认值', '带输入框的提示框', function(r) {
    if( r ) alert('你输入的是 ' + r);
});
</pre>
			<p>
				<input id="prompt_button" type="button" value="带输入框的提示框" />
			</p>
		</fieldset>
		
		
		
		<h2>高级示例</h2>
		<fieldset>
			<legend>带HTML输出效果的对话框</legend>
<pre>
jAlert('你可以使用HTML标签，比如 <strong>加粗</strong>, <em>斜体</em>，和 <u>下划线</u>!');
</pre>
			<p>
				<input id="alert_button_with_html" type="button" value="显示带有HTML标签效果的弹出框" />
			</p>
		</fieldset>
		
		<fieldset>
			<legend>CSS自定义弹出框样式</legend>
			<p>
				通过修改属性 <samp>$.alerts.dialogClass</samp>的值（同时创建你自己的CSS样式）, 你可以任意改变弹出框的外观表现:
			</p>
			
			<p>
				<input id="style_1" class="alert_style_example" type="button" value="Style 1" />
			</p>
			
			<p>
				具体的一些默认常量和参数设置，请查看插件源代码中的注释。
			</p>
		</fieldset>
		
		
		<p>
			<a href="http://abeautifulsite.net/notebook/87">查看此项目英文原文链接（English）</a>
		</p>
		<p>
			<a href="http://www.code52.net/page/JS/js200901_01_342.html">查看此项目中文翻译链接（Chinese）</a>
		</p>
		
	</body>
	
</html>
